<!-- 设备管理--基础设置-设备类型页面 -->
<template>
  <div class="equip-wrap-common">
    <div v-if="props.type === 'edit'" class="equip-table-btn">
      <px-button type="primary" class="table-btn" @click="dialogVisible = true">关联设备/附件</px-button>
    </div>
    <px-table
      :data="tableData"
      class="equip-table"
      size="small"
      :height="props.type === 'edit' ? 'calc(100vh - 362px)' : 'calc(100vh - 294px)'"
      border
    >
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" min-width="80" align="center">
        <template #default="scope">
          <px-tooltip v-if="props.type === 'view'" content="详情" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
          <px-tooltip v-if="props.type === 'edit'" content="删除" placement="top">
            <px-button link type="danger" icon="Delete" @click="handleDelete(scope.$index)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <div v-if="props.type === 'edit'" style="margin-top: 20px">
      <px-button type="primary" @click="handleSubmit">保存</px-button>
      <px-button @click="emits('backMainPage')">取消</px-button>
    </div>
    <!-- 选择设备弹窗 -->
    <AddEquipDialog :dialogVisible="dialogVisible" @closeDialog="dialogVisible = false" :className="className" @addEquipTable="addEquipTable" />
  </div>
</template>

<script setup lang="ts">
import { queryEqpRelByEqpId, saveEqpRelByEqpId } from "@/api/equip/archive";
import { PxMessage } from "px-ui";
import { reactive, toRefs, watchEffect } from "vue";
import { useRouter } from "vue-router";
import AddEquipDialog from "./AddEquipDialog.vue";

const router = useRouter();
const state = reactive<any>({
  tableColumns: [
    { prop: "eqpId", label: "设备ID", minWidth: "120", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  dialogVisible: false,
  className: ""
});
const { tableColumns, tableData, dialogVisible, className } = toRefs(state);

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["eqpDetailData", "activeName", "type"]);

// 查询设备列表
const queryTable = async () => {
  const params = {
    eqpId: props.eqpDetailData.eqpId
  };
  const data = await queryEqpRelByEqpId(params);
  tableData.value = data || [];
};
// 监视tab为附属设备/备件
watchEffect(async () => {
  if (props.activeName === "instrument") {
    className.value = props.eqpDetailData?.className;
    queryTable();
  }
});
// 删除仪表
const handleDelete = index => {
  tableData.value.splice(index, 1);
};
// 关联附属设备/备件
const handleSubmit = async () => {
  const arr = [];
  tableData.value.forEach(item => {
    arr.push(item.eqpId);
  });
  const params = {
    eqpId: props.eqpDetailData.eqpId,
    eqpIdList: arr
  };
  await saveEqpRelByEqpId(params);
  PxMessage.success("关联附属设备/备件成功");
};
// 选择设备后添加表格数据
const addEquipTable = val => {
  if (val && val.length > 0) {
    const arr = [];
    tableData.value.forEach(item => {
      arr.push(item.eqpId);
    });
    const arr2 = [];
    val.forEach(item => {
      if (!arr.includes(item.eqpId)) {
        arr2.push(item);
      }
    });
    tableData.value = [...arr2, ...tableData.value];
  }
};
// 详情
const handleView = (row: any) => {
  router.push(`/all/equip/archive/list?eqpId=${row.eqpId}`);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: 100%;
  padding: 0;
}
</style>
